import React from 'react';
import PageContainer from '../components/PageContainer';
import Divider from './components/Divider';
import Cell from '../flex/components/Cell';
import FLexRow from '../flex/components/FlexRow';
import FlexColumn from '../flex/components/FlexColumn';
import FlexRow from '../flex/components/FlexRow';

const Page = () => {
    return (
        <PageContainer>
            <h1>基础·Divider</h1>
            <h2>分割线</h2>
            <p>分割线是一个呈线状的轻量化组件，用于有逻辑的组织元素内容和页面结构或区域。</p>
            <Divider direction='horizontal' />
            <Divider direction='horizontal' width='w-3/5' />
            <h3>代码演示</h3>
            <h4>基本用法</h4>
            <Cell >
                <FLexRow className='justify-center'>
                    <p>这是垂直分割线</p>
                    <Divider direction='vertical' height='h-3/5' />
                    <p>这是垂直分割线</p>
                </FLexRow>
                <FlexColumn >
                    <p>这是水平分割线</p>
                    <Divider direction='horizontal' />
                    <p>这是水平分割线</p>
                </FlexColumn>
            </Cell>
            <h4>内嵌文字样式</h4>
            <Cell className=''>

                <FlexColumn className='w-full'>
                    <p>带文字的水平分割线</p>
                    <Divider direction='horizontal' >文字居中</Divider>
                    <Divider direction='horizontal' textPosition='start'>文字偏左</Divider>
                    <Divider direction='horizontal' textPosition='end'>文字偏右</Divider>
                </FlexColumn>
                <FlexColumn className=''>
                    <p>带文字的垂直分割线</p>
                    <FlexRow className='w-full'>

                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>左文本</p>
                        <Divider direction='vertical' textPosition='start' >文字居上</Divider>
                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>右文本</p>
                    </FlexRow>
                    {/* <FlexRow className='w-full'>
                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>左文本</p>
                        <Divider direction='vertical'  >文字居中</Divider>
                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>右文本</p>
                    </FlexRow>
                    <FlexRow className='w-full'>
                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>左文本</p>
                        <Divider direction='vertical' textPosition='end' >文字居下</Divider>
                        <p className='flex justify-center items-center bg-amber-100 w-2/5 h-70'>右文本</p>
                    </FlexRow> */}
                </FlexColumn>

            </Cell>
            <h4>分割线样式</h4>
            <Cell>
                <FlexColumn>
                    <p>这是实线分割线</p>
                    <Divider direction='horizontal' type='solid' />
                    <p>这是实线分割线</p>
                </FlexColumn>
                <FlexColumn>
                    <p>这是虚线分割线</p>
                    <Divider direction='horizontal' type='dashed' />
                    <p>这是虚线分割线</p>
                </FlexColumn>
                <FlexColumn>
                    <p>这是点分割线</p>
                    <Divider direction='horizontal' type="dotted" />
                    <p>这是点分割线</p>
                </FlexColumn>
            </Cell>
        </PageContainer >
    );
};


export default Page;
